<template>
  <div style="margin: 20px">
    <el-form :inline="true" :model="formInline" class="form-inline">
      <el-form-item label="类型">
        <el-select v-model="formInline.systemFlowId" clearable>
          <el-option
              v-for="item in systemFlowData"
              :key="item.id"
              :label="item.systemFlowName"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryTableData">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" v-loading="tableLoading" stripe style="width: 100%; height: 80%">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="systemFlowName" label="流程名称"/>
      <el-table-column prop="systemNodeName" label="节点名称"/>
      <el-table-column prop="submitDatetime" label="提交时间"/>
      <el-table-column label="操作" >
        <template #default="scope">
          <el-button size="small" :disabled = "!scope.row.flowId"
                     @click="handleFlowView(scope.$index, scope.row)">
            流程进度
          </el-button>
          <el-button
              size="small"
              type="warning"
              :disabled = "!scope.row.flowId"
              @click="handleAudit(scope.$index, scope.row)"
          >
            审批
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          v-model:total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, reactive} from 'vue';
import Flow from '@/api/Flow.js';
import { useRouter } from 'vue-router'
import SalaryAdd from "@/components/salary/SalaryAdd.vue";

const router = useRouter()

const systemFlowData = ref([]);

const tableData = ref([]);
const tableLoading = ref(false)


const handleAudit = (index, row) => {
  const id = row.flowObz;
  if ("user_register" === row.systemFlowCode) {
    router.push({name: 'userBasicAudit', query: {userId: id}});
  } else if ("user_start_salary" === row.systemFlowCode) {
    if ("confirm_salary" === row.systemNodeCode) {
      router.push({name: 'salaryMake', query: {userId: id}});
    } else if ("recheck" === row.systemNodeCode) {
      router.push({name: 'salaryRecheck', query: {userId: id}});
    }
  }
}

const handleFlowView = (index, row) => {
  const id = row.flowId;
  router.push({ name: 'flowView', query: { flowId:id } });
}

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const formInline = reactive({
  pageNo: currentPage.value,
  pageSize: pageSize.value,
  systemFlowId: '',
})

onMounted(() => {
  listAllSystemFlow()
  toDoList(formInline)
});

const listAllSystemFlow = () => {
  Flow.listAllSystemFlow()
      .then(res => {
        systemFlowData.value = res.data
      })
};

const queryTableData = () => {
  toDoList(formInline)
}

const handleSizeChange = (val: number) => {
  formInline.pageSize = val;
  toDoList(formInline)
}
const handleCurrentChange = (val: number) => {
  formInline.pageNo = val;
  toDoList(formInline)
}

const toDoList = (data) => {
  tableLoading.value = true
  Flow.toDoList(data)
      .then(res => {
        currentPage.value = res.data.pageNo
        pageSize.value = res.data.pageSize
        total.value = res.data.recordsTotal
        tableData.value = res.data.rows
        tableLoading.value = false
      })
      .catch(error => {
        tableLoading.value = false
      })
};

</script>

<style scoped>
.form-inline {
  margin: 20px;
}

.form-inline .el-select {
  --el-select-width: 200px;
}
</style>